import { BUS_THEME, BusDetail } from '@/apis/bus';
import Bg from '@/assets/choise-bg.jpg';
import Title from '@/assets/success-1.png';
import DrawButton from '@/assets/success-2.png';
import BusButton from '@/assets/success-3.png';
import ReStartButton from '@/assets/success-4.png';
import BusNike from '@/components/Bus/Nike';
import BusZhuDi from '@/components/Bus/Zhudi';
import { useMemo } from 'react';
import { history, useQuery, useSearchParams } from 'umi';

import { getUserInfo } from '@/apis/user';
import FixedButtons from '@/components/FixedButtons';
import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';
import TweenOne from 'rc-tween-one';

export default function Page() {
  const [searchParams] = useSearchParams();
  const busId = searchParams?.get('busId');

  const { data: bus } = useQuery(['bus:detail'], () =>
    BusDetail({ id: busId! }),
  );

  const { data: user } = useQuery(['get:user'], () => getUserInfo());

  // ?找到朋友
  const friend = useMemo(() => bus?.passengers?.[1], [bus]);

  // ?找到自己
  const self = useMemo(() => bus?.passengers?.[0], [bus]);

  return (
    <>
      <FixedButtons />
      <XyzTransitionGroup
        appear
        appearVisible
        xyz="fade up-2 appear-stagger"
        style={{ backgroundImage: `url(${Bg})` }}
        className=" min-h-screen relative overflow-hidden bg-cover bg-center pt-[150px]"
      >
        <h1
          className="w-[384px] h-[220px] bg-cover mx-auto"
          style={{
            backgroundImage: `url(${Title})`,
          }}
        ></h1>

        {/* bus */}
        <div xyz="fade" className=" relative">
          <TweenOne
            animation={{
              type: 'from',
              x: window.innerWidth + 200,
              duration: 3000,
            }}
            className="w-[900px] mt-[90px] ml-[80px]"
          >
            {(bus?.theme === BUS_THEME.NIKE && (
              <BusNike
                readonlyFriend
                readonly
                selfAvatar={self?.head}
                friendAvatar={friend?.head}
              />
            )) || (
              <BusZhuDi
                readonlyFriend
                readonly
                selfAvatar={self?.head}
                friendAvatar={friend?.head}
              />
            )}
          </TweenOne>
        </div>

        {/* 抽奖 */}
        {Boolean(user?.left_cj) && (
          <button
            onClick={() => history.push('/draw')}
            className="w-[382px] h-[128px] bg-full mx-auto block active:scale-95 mt-[90px] -translate-x-[16px]"
            style={{ backgroundImage: `url(${DrawButton})` }}
          />
        )}

        <button
          onClick={() => history.push('/route')}
          className="w-[346px] h-[90px] bg-full mx-auto block active:scale-95 mt-4"
          style={{ backgroundImage: `url(${BusButton})` }}
        />

        <button
          onClick={() => history.replace(`/?restart=1`)}
          className="w-[346px] h-[90px] bg-full mx-auto block active:scale-95 mt-4"
          style={{ backgroundImage: `url(${ReStartButton})` }}
        />
      </XyzTransitionGroup>
    </>
  );
}
